﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Ứng dụng google map API</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
        var serverURL = "http://localhost:1445/NhaTroService.svc";
        var getHostelURL = "http://localhost:1445/NhaTroService.svc/NhaTro";

        function initialize() {
            if (navigator.geolocation)
                navigator.geolocation.getCurrentPosition(function (pos) {
                    var myOptions = {
                        //get current location
                        center: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                        zoom: 16,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById("map"), myOptions);
                }, function (error) {
                    var myOptions = {
                        //center: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                        zoom: 16,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById("map"), myOptions);
                }
		);
        }

        //load all marker
        function loadAllMarker() {
            $.ajax({
                url: "http://localhost:1445/NhaTroService.svc/NhaTro",
                data: "{}",
                type: "GET",
                contentType: "application/javascript", //set ajax call through cross domain
                dataType: "jsonp",
                success: function (data) {
                    //alert(data);
                    //create marker


                }
            });           
        }


        //cac ham lien quan den viec khoi tao dau tien
        $(document).ready(function () {
            //load map
            initialize();

            //add loadAll button click event
            $("#loadAll").click(function () {
                loadAllMarker();
            });
        });
    </script>
</head>
<body>
	<div id="header">
		<div class='main-menu'>
			<ul>
			   <li class='active '><a href='index.html'><span>Home</span></a></li>
			   <li><a href='#'><span>Products</span></a>
				  <ul>
					 <li><a href='#'><span>Product 1</span></a></li>
					 <li><a href='#'><span>Product 2</span></a></li>
				  </ul>
			   </li>
			   <li><a href='#'><span>About</span></a></li>
			   <li><a href='#'><span>Contact</span></a></li>
			</ul>
		</div>
	</div><!--#header-->
	<div id="container">
		<div id="left-content">
			<input type="button" id="loadAll"  value="Lay tat ca nha tro"/>

		</div><!--#left-content-->
		<div id="right-content">
            <div id="map">
            </div>
		</div><!--#right-content-->
	</div><!--#containner-->
</body>
</html>
